<template>
  <view class="padding-bottom-sm">
    <cu-custom :isBack="true" bgColor="bg-white">
      <block slot="backText">返回</block>
      <block slot="content">武将进阶材料</block>
    </cu-custom>
    <view>
      <ad unit-id="adunit-52205ab20ef0c126" ad-type="video" ad-theme="white"></ad>
    </view>
    <view class="margin-top-xxl card">
      <view class="cu-form-group">
        <view class="title">目前的等级:</view>
        <input v-model="levelnow" @click="showOption('now')" placeholder="请选择当前等级"
               :disabled="true"></input>
      </view>
      <view class="cu-form-group margin-top-xxl">
        <view class="title">进阶的等级:</view>
        <input v-model="levelwant" @click="showOption('want')" placeholder="请选择进阶等级" :disabled="true"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">进阶丹数量:</view>
        <input type="number" v-model="jjd" placeholder="你目前拥有的进阶丹"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">进化石数量:</view>
        <input type="number" v-model="jhs" placeholder="你目前拥有的进化石"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">真进化石数:</view>
        <input type="number" v-model="zjhs" placeholder="你目前拥有的真进化石"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武将精华数:</view>
        <input type="number" v-model="wjjh" placeholder="你目前拥有的武将精华"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">圣进化石数:</view>
        <input type="number" v-model="sjhs" placeholder="你目前拥有的圣进化石"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">九转金丹数:</view>
        <input type="number" v-model="jzjd" placeholder="你目前拥有的九转金丹"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">神进化石数:</view>
        <input type="number" v-model="shjhs" placeholder="你目前拥有的神进化石"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武将金魂数:</view>
        <input type="number" v-model="wjjhun" placeholder="你目前拥有的武将金魂"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">真神进化石:</view>
        <input type="number" v-model="zsjhs" placeholder="你目前拥有的真神进化石"></input>
      </view>
      <view class="cu-form-group">
        <view class="title">武将白金魂:</view>
        <input type="number" v-model="wjbjh" placeholder="你目前拥有的武将白金魂"></input>
        <button class="cu-btn bg-green shadow" @click="calc">Go!</button>
      </view>
    </view>

    <view class="cu-modal" :class="show ? 'show': ''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">选择阶级</view>
          <view class="action" @tap="show = false">
            <text class="cuIcon-close text-gray"></text>
          </view>
        </view>
        <view class="padding-xl flex justify-between flex-wrap">
          <view
              @tap.stop="chooseOption(item, i)"
              style="width: 40%;" class="padding-sm margin-sm radius lg"
              v-for="(item, i) in level"
              :class="(i < index && type === 'want') ? 'bg-green light' : 'bg-green'">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        level: [{
          name: '金卡0阶',
          jjd: 500,
          jhs: 0,
          zjhs: 300,
          wjjh: 10,
          sjhs: 300,
          jzjd: 30,
          shjhs: 0,
          wjjhun: 0,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '金卡1阶',
          jjd: 1000,
          jhs: 0,
          zjhs: 800,
          wjjh: 10,
          sjhs: 800,
          jzjd: 80,
          shjhs: 0,
          wjjhun: 0,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '金卡2阶',
          jjd: 2000,
          jhs: 0,
          zjhs: 1600,
          wjjh: 20,
          sjhs: 1600,
          jzjd: 160,
          shjhs: 0,
          wjjhun: 0,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '金卡3阶',
          jjd: 3000,
          jhs: 0,
          zjhs: 2800,
          wjjh: 30,
          sjhs: 2800,
          jzjd: 280,
          shjhs: 0,
          wjjhun: 0,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金0阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 10,
          sjhs: 200,
          jzjd: 40,
          shjhs: 300,
          wjjhun: 20,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金1阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 10,
          sjhs: 400,
          jzjd: 80,
          shjhs: 500,
          wjjhun: 20,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金2阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 20,
          sjhs: 600,
          jzjd: 120,
          shjhs: 800,
          wjjhun: 40,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金3阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 30,
          sjhs: 1200,
          jzjd: 240,
          shjhs: 1600,
          wjjhun: 60,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金4阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 40,
          sjhs: 2400,
          jzjd: 480,
          shjhs: 3200,
          wjjhun: 80,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '暗金5阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 50,
          sjhs: 3600,
          jzjd: 720,
          shjhs: 4800,
          wjjhun: 100,
          zsjhs: 0,
          wjbjh: 0
        }, {
          name: '白金0阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 10,
          sjhs: 0,
          jzjd: 20,
          shjhs: 300,
          wjjhun: 10,
          zsjhs: 300,
          wjbjh: 40
        }, {
          name: '白金1阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 10,
          sjhs: 0,
          jzjd: 40,
          shjhs: 400,
          wjjhun: 10,
          zsjhs: 500,
          wjbjh: 40
        }, {
          name: '白金2阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 20,
          sjhs: 0,
          jzjd: 60,
          shjhs: 600,
          wjjhun: 20,
          zsjhs: 800,
          wjbjh: 80
        }, {
          name: '白金3阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 30,
          sjhs: 0,
          jzjd: 120,
          shjhs: 1200,
          wjjhun: 30,
          zsjhs: 1600,
          wjbjh: 120
        }, {
          name: '白金4阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 40,
          sjhs: 0,
          jzjd: 240,
          shjhs: 2400,
          wjjhun: 40,
          zsjhs: 3200,
          wjbjh: 160
        }, {
          name: '白金5阶',
          jjd: 0,
          jhs: 0,
          zjhs: 0,
          wjjh: 50,
          sjhs: 0,
          jzjd: 360,
          shjhs: 3600,
          wjjhun: 50,
          zsjhs: 4800,
          wjbjh: 200
        }],
        jjd: "",
        jhs: "",
        zjhs: "",
        wjjh: "",
        sjhs: "",
        jzjd: "",
        shjhs: "",
        wjjhun: "",
        zsjhs: "",
        wjbjh: "",
        levelnow: "",
        levelwant: "",
        index: 0,
        type: ""
      }
    },
    methods: {
      showOption(type) {
        if (type === "now") this.levelwant = ""
        this.type = type
        this.show = true
      },
      chooseOption(item, i) {
        if (i < this.index && this.type === 'want') return
        if (this.type === "now") {
          this.levelnow = item.name
        } else {
          this.levelwant = item.name
        }
        this.index = i
        this.show = false
      },
      calc() {
        if (!this.levelnow) {
          uni.showToast({
            title: "兄弟, 记得选择现在的阶级哦~",
            icon: "none"
          })
          return
        }
        if (!this.levelwant) {
          uni.showToast({
            title: "兄弟, 记得选择想要到达的阶级哦~",
            icon: "none"
          })
          return
        }
        let start = 0, end = 0

        this.level.forEach((item, index) => {
          if (item.name === this.levelnow) {
            start = index
          } else if (item.name === this.levelwant) {
            end = index
          }
        })

        let list = this.level.slice(start + 1, end + 1)

        let jjd = 0, jhs = 0, zjhs = 0, wjjh = 10, sjhs = 0, jzjd = 20, shjhs = 300, wjjhun = 10, zsjhs = 300, wjbjh = 40

        jjd = list.reduce((pre, cur) => {
          return pre + cur.jjd
        }, 0) - this.jjd

        jhs = list.reduce((pre, cur) => {
          return pre + cur.jhs
        }, 0) - this.jhs

        zjhs = list.reduce((pre, cur) => {
          return pre + cur.zjhs
        }, 0) - this.zjhs

        wjjh = list.reduce((pre, cur) => {
          return pre + cur.wjjh
        }, 0) - this.wjjh

        sjhs = list.reduce((pre, cur) => {
          return pre + cur.sjhs
        }, 0) - this.sjhs

        jzjd = list.reduce((pre, cur) => {
          return pre + cur.jzjd
        }, 0) - this.jzjd

        shjhs = list.reduce((pre, cur) => {
          return pre + cur.shjhs
        }, 0) - this.shjhs

        wjjhun = list.reduce((pre, cur) => {
          return pre + cur.wjjhun
        }, 0) - this.wjjhun

        zsjhs = list.reduce((pre, cur) => {
          return pre + cur.zsjhs
        }, 0) - this.zsjhs

        wjbjh = list.reduce((pre, cur) => {
          return pre + cur.wjbjh
        }, 0) - this.wjbjh

        uni.showModal({
          title: "兄得~",
          content:
              `从${this.levelnow}升到${this.levelwant},
                ${jjd > 0 ? '还需' + jjd + '进阶丹, ' : ''}
                ${jhs > 0 ? '还需' + jhs + '进化石, ' : ''}
                ${zjhs > 0 ? '还需' + zjhs + '真进化石, ' : ''}
                ${wjjh > 0 ? '还需' + wjjh + '武将精华, ' : ''}
                ${sjhs > 0 ? '还需' + sjhs + '圣进化石, ' : ''}
                ${jzjd > 0 ? '还需' + jzjd + '九转金丹, ' : ''}
                ${shjhs > 0 ? '还需' + shjhs + '神进化石, ' : ''}
                ${wjjhun > 0 ? '还需' + wjjhun + '武将金魂, ' : ''}
                ${zsjhs > 0 ? '还需' + zsjhs + '真神进化石, ' : ''}
                ${wjbjh > 0 ? '还需' + wjbjh + '武将白金魂' : ''}
              `
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .card {
    background-image: url('https://mmbiz.qpic.cn/sz_mmbiz_jpg/8iaIEbCVSqJaIGrdMibKibPSDVzEZPtsBOItPI04BLwic6CC6lbbJ4SBd4q6WPn8HonWIbIfEfgQmk6G3fXFn0Hc9g/640?wx_fmt=jpeg&wxfrom=13');
    background-size: cover;
    background-position: center center;
  }

  .cu-form-group {
    background-color: rgba(255, 255, 255, 0.8);
  }
</style>
